<template>
    <div class="template-index-Lu">
        <commpVxeTable
            :isCanWrap="true"
            :key="reCommpVxeTable"
            :config="dataTableConfig"
            :columns="columnsVxe"
            :formItem="formItem"
            @checkboxChange="checkboxChange"
            ref="administrativeOffice"
            @searchEvent="searchEvent"
            @resetEvent="resetEvent"
            >
            <template v-slot:operation_fsqr="{row}" data-desc="申请人">
                <span style="padding-right: 21;" v-if="row.fsqr.length == 2">
                    <span v-for="(trem,tI) in row.fsqr.split('')" :key="tI" >
                        {{trem}}
                        <span v-if="tI+1 !== row.fsqr.split('').length">&nbsp;&nbsp;</span>
                    </span>
                </span>
                <span style="padding-right: 21;" v-else>{{ row.fsqr }}</span>
            </template>
            <template v-slot:operation_fhjmc="{row}" data-desc="环节名称">
                <span>{{ row.fhjmc }}</span><br/>
                <span v-if="row.fsftqxj == '是'">（提前销假）</span>
            </template>
            <template v-slot:operation_fsqsj="{row}" data-desc="申请时间">
                <span>{{ row.fsqsj }}</span>
                <a-icon type="edit" @click="updataTimeClick(row)" style="color: #409eff;margin-left: 5px;"/>
            </template>
            <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
                <a-form layout="inline">
                    <a-form-item>
                        <a-button class="green-btn" @click="reviseClick(row)" icon="edit">数据修订</a-button>
                    </a-form-item>
                </a-form>
            </template>
        </commpVxeTable>
        <handleModal ref="handleModalRef" @resetEvent="resetEvent"></handleModal>
        <updataTime ref="updataTimeRef" @updataFuntion="updataFuntion"/>
    </div>
</template>
<script>
import { queryByJodId } from './service/index'
import  commpVxeTable   from '@/components/commp-vxe-table/commp-vxe-table.vue'
import handleModal from '../modal/handleModal.vue'
import assessCheckApi from './service/api'
import updataTime from '../modal/updataTime'
import moment from 'moment'
import store from '@/store'
export default {
    components: {
        commpVxeTable,
        handleModal,
        updataTime,
    },
    data() {
        return {
            moment:moment,
            reCommpVxeTable: '',
            dataTableConfig: {
                api: assessCheckApi.list,
                rowId: 'id',
                urlType: true,
                paramet: {}
            },
            columnsVxe: [
                {
                    title: '标题',
                    field: 'fbt',
                    // width: 100,
                    titleInterval:true,
                    slots: {
                        header:'data1_header',
                    }
                },{
                    title: '摘要',
                    field: 'fzy',
                    align:'left',
                    titleInterval:true,
                    slots: {
                        header:'data2_header',
                    }
                },{
                    title: '申请人',
                    field: 'fsqr',
                    width: 80,
                    interval:true,
                    slots: {
                        default:'operation_fsqr',
                    }
                },{
                    title: '申请时间',
                    field: 'fsqsj',
                    width: 200,
                    slots: {
                        default:'operation_fsqsj',
                    }
                },{
                    title: '环节名称',
                    field: 'fhjmc',
                    slots: {
                        default:'operation_fhjmc',
                    }
                },{
                    title: '操作',
                    field: 'jobid',
                    width: 150,
                    titleInterval:true,
                    slots: {
                    // 使用插槽模板渲染
                        header:'data3_header',
                        default: 'operation_btn',
                    },
                }
            ],
            formItem: [
                {
                    label: '申请人',
                    model: 'fsqr',
                },
                {
                    label: '流程名称',
                    model: 'flcmb',
                    type:'Select',
                    options:[{
                        label:'离岗请示',
                        value:'OA_LGQS'
                    },{
                        label:'请休假',
                        value:'OA_QXJ'
                    },{
                        label:'加班值班',
                        value:'OA_JBZB'
                    },{
                        label:'出差审批',
                        value:'NK_CCSP'
                    },{
                        label:'行政事务审批',
                        value:'OA_XZSWSP'
                    },{
                        label:'宣传信息审批',
                        value:'OA_XCXXSP'
                    },{
                        label:'会议室申请管理',
                        value:'OA_HYSSQGL'
                    },{
                        label:'办公用品申请',
                        value:'OA_BGYPSQ'
                    }]
                },
            ],
            idList: [],
        }
    },
    methods: {
        // 勾选
        checkboxChange(val){
            //console.log('已选择111',val)
            this.idList = []
            if(val.length){
                val.forEach(item => {
                    this.idList.push(item.id)
                });
            }
        },
        // 搜索
        searchEvent(){
            this.dataTableConfig.paramet = {
                ...this.dataTableConfig.paramet,
            }
        },
        // 重置
        resetEvent(){
            this.dataTableConfig.paramet = {
                ...this.dataTableConfig.paramet,
            }
        },
        // 点击办理
        reviseClick(row){
            //console.log(row)
            var that = this
            that.$confirm({
                title: '您确定要对当条数据发起修改吗?',
                onOk() {
                    let data = {
                        jobId: row.jobid?row.jobid:'',
                        lcmbbm: row.flcmb,
                        fpid: row.fpid,
                    }
                    queryByJodId(data).then(res => {
                        //console.log(res)
                        let resA = res.result
                            resA.hjmc = '数据修订'
                        if(res.code == 200){
                            that.$nextTick(_ => {
                                that.$refs.handleModalRef.modalClick(resA)
                            })
                        }
                    })
                },
                onCancel() {
                    //console.log('Cancel');
                },
            });
        },
        updataTimeClick(item){
            var that = this
            that.$confirm({
                title: '您确定要修改发起时间吗?',
                onOk() {
                    that.$refs.updataTimeRef.getData({pid:item.fpid,sqsj:moment(item.fsqsj,'YYYY-MM-DD HH:mm')})
                    that.$refs.updataTimeRef.visible = true
                },
                onCancel() {
                    //console.log('Cancel');
                },
            });
        },
        updataFuntion(){
            this.reCommpVxeTable = Date.now()
        },
        cancel() {
            //console.log('Cancel');
        },
    },
}
</script>
